<template>
  <div class="NoContainer">
    <el-row>
      <el-col :span="24">
        <infoBox title="年度累计统计" class="infoBox statistics-box">
          <template v-slot:right>
            <div class="check">
              <el-dropdown @command="handleYearSelect">
                <span class="el-dropdown-link">
                  {{ selectedYear+'年度' || '选择年份' }}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item 
                    v-for="year in yearList" 
                    :key="year"
                    :command="year"
                  >
                    {{ year }}年度
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </template>
          <template v-slot:body>
            <div class="itemall">
              <div class="item">
                <img src="../../../../assets/images/visual/icon1.png" class="img" />
                <div class="content">
                  <div class="number">{{ numAll.num1 }}</div>
                  <div class="title">已上线教育视频数</div>
                </div>
              </div>
              <div class="item">
                <img src="../../../../assets/images/visual/icon2.png" class="img" />
                <div class="content">
                  <div class="number">{{ numAll.num2 }}</div>
                  <div class="title">用户注册总数</div>
                </div>
              </div>
              <div class="item">
                <img src="../../../../assets/images/visual/icon3.png" class="img" />
                <div class="content">
                  <div class="number">{{ numAll.num3 }}</div>
                  <div class="title">获取证书总数</div>
                </div>
              </div>
              <div class="item">
                <img src="../../../../assets/images/visual/icon4.png" class="img" />
                <div class="content">
                  <div class="number">{{ numAll.num4 }}</div>
                  <div class="title">资料下载总数</div>
                </div>
              </div>
            </div>
          </template>
        </infoBox>
      </el-col>
    </el-row>
    <el-row :gutter="16" class="chart-row">
      <el-col :span="16">
        <!-- <infoBox title="单个题型正确错误率统计" class="infoBox error-rate-box">
          <template v-slot:right>
            <div class="check">教育培训专题选择</div>
          </template>
          <template v-slot:body>
            <el-tabs v-model="activeName">
              <el-tab-pane label="单题正确率" name="correct">单题正确率</el-tab-pane>
              <el-tab-pane label="单题错误率" name="">单题错误率</el-tab-pane>
            </el-tabs>
            <div class="cwl">
              <div>错误率</div>
              <div>正确率</div>
            </div>
            <div class="itemall2">
              <div class="item2" v-for="(item, index) in cwlList" :key="index" @click="goToDetail(item)">
                <el-tooltip placement="right">
                  <div slot="content">
                    <div class="item2-tool1">
                      <div>题目序号12</div>
                      <div>50%</div>
                    </div>
                    <div class="item2-tool2">
                      <div>题目序号7</div>
                      <div>50%</div>
                    </div>
                  </div>
                  <div>
                    <div class="number2">47.2%</div>
                    <div class="item22">
                      <div class="number">52.8%</div>
                    </div>
                  </div>
                </el-tooltip>
              </div>
            </div>
          </template>
        </infoBox> -->
        <div class="info-box infoBox accuracy-box" style="background-color: #fff; border-radius: 4px; padding: 5px 16px 16px; position: relative;">
          <div class="header" style="position: absolute; right: 16px; top: 15px; z-index: 1000; font-weight: 600;">
            <el-dropdown trigger="click" @command="handleCommand">
              <span class="el-dropdown-link">
                {{ subjectNameNew }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="(item, index) in subjectListNew" :key="index" :command="item.id">{{ item.name }}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <el-tabs v-model="activeName">
            <el-tab-pane label="单题正确率" name="correct">
              <div class="item2-header1">
                <div class="accuracy">正确率</div>
              </div>
              <div class="itemall2">
                <template v-for="(item, index) in zqlList">
                  <div class="item2-right" :key="index" v-if="index < 8" @click="goToDetail(item)">
                    <el-tooltip placement="right">
                      <div slot="content">
                        <div class="item2-tool1">
                          <!-- <div>{{ item.title }}</div>
                          <div>{{ item.percent }}</div> -->
                          <div>{{ item.parentId }}</div>
                          <div>{{ item.rate }}%</div>
                        </div>
                      </div>
                      <div>
                        <div class="item11" :style="{ height: item.rate * 0.9 + '%' }">
                          <div class="number">{{ item.percent }}</div>
                        </div>
                      </div>
                    </el-tooltip>
                  </div>
                </template>
              </div>
            </el-tab-pane>
            <el-tab-pane label="单题错误率" name="error">
              <div class="item2-header1">
                <div class="accuracy">错误率</div>
              </div>
              <div class="itemall2">
                <template v-for="(item, index) in cwlList">
                  <div class="item2-error" :key="index" v-if="index < 8" @click="goToDetail(item)">
                    <el-tooltip placement="right">
                      <div slot="content">
                        <div class="item2-tool2">
                          <!-- <div>{{ item.title }}</div>
                          <div>{{ item.percent }}</div> -->
                          <div>{{ item.parentId }}</div>
                          <div>{{ item.rate }}%</div>
                        </div>
                      </div>
                      <div>
                        <div class="item22" :style="{ height: item.rate * 0.9 + '%' }">
                          <div class="number">{{ item.percent }}</div>
                        </div>
                      </div>
                    </el-tooltip>
                  </div>
                </template>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
      <el-col :span="8">
        <infoBox title="正确率统计" class="infoBox accuracy-box">
          <template v-slot:right>
            <!-- <div class="check">试卷名称试卷名称</div> -->
            <el-dropdown trigger="click" @command="handleExamCommand">
              <span class="el-dropdown-link">
                {{ examName }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="(item, index) in examList" :key="index" :command="item.id">{{ item.fullName }}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
          <template v-slot:body>
            <div class="mychar22">
              <echart id="myChart2" :option="bOption" style="width: 100%; height: 220px; padding: 0px" />
            </div>
          </template>
        </infoBox>
      </el-col>
    </el-row>
    <el-row :gutter="16" class="chart-row">
      <el-col :span="24">
        <infoBox title="各市培训情况图形统计" class="infoBox training-stats-box">
          <template v-slot:right>
            <!-- <div class="check">教育培训专题选择</div> -->
            <el-dropdown trigger="click" @command="handleSubjectCommand">
              <span class="el-dropdown-link">
                {{ areaSubjectName }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="(item, index) in subjectListNew" :key="index" :command="item.id">{{ item.name }}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <!-- <el-dropdown style="margin-left: 15px;">
              <span class="el-dropdown-link">
                {{ provinceName }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown"></el-dropdown-menu>
            </el-dropdown> -->
            <!-- <el-dropdown style="margin-left: 15px;" trigger="click" @command="handleAreaCommand">
              <span class="el-dropdown-link">
                {{ provinceName }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="(item, index) in provinceList" :key="index" :command="item.id">{{ item.fullName }}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown> -->
          </template>
          <template v-slot:body>
            <echart id="myChart1" :option="aOption"
              style="width: 100%; height: 220px; padding: 0px; margin-top: -10px" />
          </template>
        </infoBox>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import infoBox from "@/components/infoBox/index";
import echart from "@/components/echart";
// import { getMySubjectList } from "@/api/exam";
import { getZTlist } from '@/api/dataCenter/dataCenterApi'
import { getDictionaryDataList } from '@/api/systemData/dictionary'
import { getScopeList} from "@/api/exam";
import {
  getProvinceList
} from "@/api/system/province";
import {
  getSubjectExamRightData,
  getStudyExamRightDataList,
  getStudyExamWrongDataList,
  getProvinceSubjectData,
  getYearCount
} from "@/api/tems/visualAnalysis";
import { myExamListNew } from "@/api/exam";
export default {
  components: { infoBox, echart },
  data() {
    return {
      activeName: 'correct',
      subjectList: [],
      subjectObj: {},
      subjectId: '',
      subjectName: '',
      aOption: {},
      bOption: {},
      zqlList: [],
      cwlList: [],
      areaSubjectId: '',
      areaSubjectName: '',
      provinceList: [{
        id: '32',
        fullName: '江苏省'
      }],
      provinceObj: {
        "32": '江苏省'
      },
      provinceId: '32',
      provinceName: '江苏省',
      examList: [],
      examObj: {},
      examId: '',
      examName: '',
      currentYear: new Date().getFullYear(),
      selectedYear: new Date().getFullYear(),
      numAll: {
        num1: 0,
        num2: 0,
        num3: 0,
        num4: 0
      },
      currentPage: 1,
      pageSize: 10,
      certificateOptions: [],
      categoryId: null,
      subjectListNew: [],
      subjectObjNew: {},
      subjectIdNew: '',
      subjectNameNew: '',
    };
  },
  computed: {
    yearList() {
      const years = []
      for (let i = 0; i <= 10; i++) {
        years.push(this.currentYear - i)
      }
      return years
    }
  },
  created() {
    // 获取单题正确率的下拉
    this.getDicList();

    // // 加载我的专题列表
    // getZTlist({pageSize: 10000}).then(res => {
    //   res.data.list.forEach(item => {
    //     this.subjectObj[item.id] = item.name;
    //   });
    //   this.subjectList = res.data.list;
    //   // 获取第一个专题
    //   this.areaSubjectId = this.subjectList[0].id;
    //   this.areaSubjectName = this.subjectList[0].name;
    //   // 加载省市分布
    //   this.loadAreaEcharts();
    // });
  },
  mounted() {
    // 加载省的列表
    // getProvinceList(-1).then(res => {
    //   res.data.list.forEach(item => {
    //     this.provinceObj[item.id] = item.fullName;
    //   });
    //   this.provinceList = res.data.list;
    //   // 获取第一个省市
    //   this.provinceId = this.provinceList[0].id;
    //   this.provinceName = this.provinceList[0].fullName;
    //   // 加载分布图
    //   this.loadAreaEcharts();
    // })
    // 加载我的考试列表
    myExamListNew({
      categoryId: 4,
      // enabledMark: 0,
      currentPage: this.currentPage,
      pageSize: 10000
    }).then(res => {
      res.data.list.forEach(item => {
        this.examObj[item.id] = item.fullName;
      });
      this.examList = res.data.list;
      // 获取第一个
      this.examId = this.examList[0].id;
      this.examName = this.examList[0].fullName;
      // 加载分布图
      this.loadExamEcharts();
    })
    // 筛选年份
    this.getYearCountInit();
  },
  methods: {
    // 年份
    getYearCountInit() { 
      let year = this.selectedYear;
      getYearCount(year).then(res => {
        let data = res.data;
        this.numAll.num1 = data.courseCount;
        this.numAll.num2 = data.userCount;
        this.numAll.num3 = data.certificateCount;
        this.numAll.num4 = data.downloadCount;
      })
      .catch(err=> {
      })
    },
    handleYearSelect(year) {
      this.selectedYear = year;
      this.getYearCountInit();  // 筛选年份
    },
    // 获取单题正确率的下拉
    getDicList() {
      getDictionaryDataList('559344237955514629', {
        keyword: '',
        isTree: 0
      }).then(res => {
        this.certificateOptions = res.data.list;
        for(let i in this.certificateOptions) {
          if (this.certificateOptions[i].enCode == 'Leader') {
            this.categoryId = this.certificateOptions[i].id;
          }
        }
        this.getList();
      })
    },
    getList() {
      getScopeList({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        categoryId: this.categoryId
      }).then((res) => {
        if (res.code === 200 && res.data.list.length > 0) {
          res.data.list.forEach(item => {
            this.subjectObjNew[item.id] = item.name;
          });
          this.subjectListNew = res.data.list;
          // 获取第一个专题
          this.subjectIdNew = this.subjectListNew[0].id;
          this.subjectNameNew = this.subjectListNew[0].name;
          // 加载其他的数据
          this.loadPercentData();
          // 获取第一个专题
          this.areaSubjectId = this.subjectListNew[0].id;
          this.areaSubjectName = this.subjectListNew[0].name;
          // 加载省市分布
          this.loadAreaEcharts();

        } else {
          this.courseList = [];
        }
      });
    },
    handleCommand(command) {
      this.subjectIdNew = command;
      this.subjectNameNew = this.subjectObjNew[command];
      this.loadPercentData();
    },
    loadPercentData() {
      // 获取正确率
      getSubjectExamRightData({
        subjectId: this.subjectIdNew
      }).then(res => {
        this.zqlList = res.data.sort((a, b) => b.rate - a.rate).map(item => {
          const roundedRate = Math.round(item.rate * 100);
          return {
            parentId: item.parentId,
            title: item.title,
            rate: roundedRate,
            percent: roundedRate + '%'
          }
        })
      })
      .catch(err => {
      });
      // 获取错误率
      getStudyExamWrongDataList({
        subjectId: this.subjectIdNew
      }).then(res => {
        this.cwlList = res.data.sort((a, b) => b.rate - a.rate).map(item => {
          const roundedRate = Math.round(item.rate * 100);
          return {
            parentId: item.parentId,
            title: item.title,
            rate: roundedRate,
            percent: roundedRate + '%'
          }
        })
      });
    },
    goToDetail(item) {
      console.log(item);
    },
    handleSubjectCommand(command) {
      this.areaSubjectId = command;
      this.areaSubjectName = this.subjectObjNew[command];
      this.loadAreaEcharts();
    },
    handleAreaCommand(command) {
      this.provinceId = command;
      this.provinceName = this.provinceObj[command];
      this.loadAreaEcharts();
    },
    loadAreaEcharts() {
      if (!this.areaSubjectId || !this.provinceId) {
        // 两者缺一都不加载数据
        return;
      }
      // 省市分布
      getProvinceSubjectData({
        provinceId: this.provinceId,
        subjectId: this.areaSubjectId
      }).then(res => {
        this.initAreaEcharts(res.data.list);
      })
    },
    initAreaEcharts(data) {
      const retMap = {
        fullName: [],
        participantNumber: [],
        completeNumber: []
      }
      data.forEach(item => {
        retMap.fullName.push(item.fullName);
        retMap.participantNumber.push(item.participantNumber);
        retMap.completeNumber.push(item.completeNumber);
      })
      this.aOption = {
        title: {
          text: "",
          left: "center",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          top: "0", // 控制 板块控制器的位置
          right: "70",
          // icon: 'rect',//形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
          // itemWidth: 10,  // 设置宽度
          // itemHeight: 4, // 设置高度
          // 设置两个legend之间的间距
          data: [
            {
              name: "参加培训人数", // 这个name需要和 series 里面的 name 对应起来
            },
            {
              name: "培训通过人数", // 这个name需要和 series 里面的 name 对应起来
            },
          ],
        },

        grid: {
          show: false, //是否显示直角坐标系网格
          top: "15%", // 距离图例顶部的位置，可写百分比，可以写数字
          right: "8%",
          bottom: "10%",
          left: "8%",
        },
        xAxis: {
          type: "category",
          data: retMap.fullName,
        },
        yAxis: {
          type: "value",
          name: "",

          min: 0,
        },
        series: [
          {
            barMaxWidth: 8,
            name: "参加培训人数",
            data: retMap.participantNumber,
            type: "bar",
            itemStyle: {
              color: "#2265EE",
            },
          },
          {
            barMaxWidth: 8,
            name: "培训通过人数",
            data: retMap.completeNumber,
            type: "bar",
            itemStyle: {
              color: "#45C381",
            },
          },
        ],
      };
    },
    handleExamCommand(command) {
      this.examId = command;
      this.examName = this.examObj[command];
      this.loadExamEcharts();
    },
    loadExamEcharts() {
      getStudyExamRightDataList({
        examId: this.examId,
        currentPage: 1,
        pageSize: 5
      }).then(res => {
        this.initExamEcharts(res.data.list);
      })
    },
    initExamEcharts(data) {
      const dataVal = data.map(item => {
        return {
          // name: item.title,
          name: item.parentId,
          value: item.answeredNum - item.wrongNum,
          rate: item.rate * 100 + '%'
        };
      });
      this.bOption = {
        // tooltip: {
        //   trigger: 'item',
        //   formatter: '{a} <br/>{b}: {c} ({d}%)'
        // },
        legend: {
          orient: "vertical",
          left: "right",
        },
        color: [
          "#45C381",
          "#FF950B",
          "#FF554E",
          "#7A79FF",
          "#2265EE",
          "#0940F6",
          "#B943E2",
          "#E93EB9",
        ],
        series: [
          {
            name: "Access From",
            type: "pie",
            center: ["35%", "50%"],
            radius: ["40%", "55%"],
            itemStyle: {
              borderWidth: 5, // 设置边框粗细
              borderColor: "#fff", // 设置边框颜色
            },
            label: {
              alignTo: 'edge',
              formatter: function(e) {
                // return `${e.data.name}\n${e.data.rate}`;
                return `${e.data.rate}`;
              },
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 15,
              rich: {
                time: {
                  fontSize: 10,
                  color: '#999'
                }
              }
            },
            data: dataVal,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ]
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.NoContainer {
  min-width: 1200px;
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 2%;
}

.statistics-box {
  height: 25vh;
  min-height: 160px;
}

.chart-row {
  margin: 0 !important;
  height: 32vh;
  min-height: 280px;
}

.error-rate-box,
.accuracy-box {
  height: 100%;
}

.training-stats-box {
  height: 30vh;
  min-height: 240px;
}

.mychar22 {
  width: 100%;
  height: calc(100% - 40px);
  display: flex;
  justify-content: center;
  align-items: center;

  #myChart2 {
    width: 100%;
    height: 100%;
  }
}

#myChart1 {
  width: 100%;
  height: calc(100% - 40px);
  margin-top: 20px;
}

.itemall {
  width: 100%;
  height: 90%;
  display: flex;
  gap: 2%;
  box-sizing: border-box;

  .item {
    background: #ffffff;
    border-radius: 0.5rem;
    flex: 1;
    height: 100%;
    min-height: 120px;
    border: 1px solid #e2e7f5;
    display: flex;
    align-items: center;
    padding: 3%;
    box-sizing: border-box;

    .img {
      width: 20%;
      max-width: 60px;
      height: auto;
      object-fit: contain;
    }

    .content {
      margin-left: 5%;
      width: 75%;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;

      .number {
        font-size: 24px;
        font-weight: bold;
        color: #323232;
        line-height: 1.2;
      }

      .title {
        font-size: 14px;
        color: #536387;
      }
    }
  }
}

.item2-header1 {
  position: absolute;
  right: 16px;
  top: 8px;
}

.itemall2 {
  display: flex;
  flex-wrap: wrap;
  gap: 5%;
  height: 178px;
  overflow: hidden;
  // justify-content: space-between;
  position: relative;
  margin-top: 30px;

  .item2-right,
  .item2-error {
    width: 8%;
    min-width: 35px;
    height: calc(100% - 5px);
    margin-top: 5px;
    min-height: 100px;
    background: #e6eeff;
    border-radius: 1.5rem;
    position: relative;
    cursor: pointer;
    transition: all 0.3s;

    .number2 {
      font-size: 0.75rem;
      color: #8db2ff;
      text-align: center;
      padding-top: 15%;
    }

    .item11 {
      position: absolute;
      bottom: 5%;
      left: 50%;
      transform: translateX(-50%);
      width: 68%;
      height: 60%;
      background: #8db2ff;
      border-radius: 1.5rem;
      display: flex;
      justify-content: center;
      align-items: center;

      .number {
        font-size: 0.75rem;
        color: #2265ee;
      }
    }

    .item22 {
      position: absolute;
      bottom: 5%;
      left: 50%;
      transform: translateX(-50%);
      width: 80%;
      height: 60%;
      background: #b7acef;
      border-radius: 1.5rem;
      display: flex;
      justify-content: center;
      align-items: center;

      .number {
        font-size: 0.75rem;
        color: #2265ee;
      }
    }
  }

  .item2-right {
    &:hover {
      border: 1px solid #2265ee;
      transform: translateY(-2px);

      .item11 {
        background: #2265ee;

        .number {
          color: #fff;
        }
      }
    }
  }
  .item2-error {
    &:hover {
      border: 1px solid #6551cb;
      transform: translateY(-2px);
      
      .item22 {
        background: #6551cb;

        .number {
          color: #fff;
        }
      }
    }
  }
}

.check {
  font-size: 0.875rem;
  color: #98a4bf;
}

.cwl {
  display: flex;
  justify-content: flex-end;
  gap: 5%;
  padding: 0 2%;
  font-size: 0.75rem;
  color: #536387;
  height: 2rem;

  div {
    position: relative;
    padding-left: 1.2rem;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 50%;
    }

    &:first-child::before {
      background-color: #e6eeff;
    }

    &:last-child::before {
      background-color: #2265ee;
    }
  }
}

.item2-tool1,
.item2-tool2 {
  display: flex;
  width: 100%;
  height: 2rem;
  line-height: 2rem;

  div:nth-child(1) {
    width: 100%;
    height: 100%;
    position: relative;
    padding-left: 1.2rem;

    &::before {
      content: "";
      width: 0.5rem;
      height: 0.5rem;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      margin-right: 0.6rem;
    }
  }

  div:nth-child(2) {
    width: 80px;
    text-align: right;
    padding-right: 0.6rem;
  }
}

.item2-tool1 div:nth-child(1)::before {
  background: #2265ee;
}

.item2-tool2 div:nth-child(1)::before {
  background-color: #6551cb;
}

@media screen and (max-width: 1440px) {
  .statistics-box {
    height: 23vh;
  }

  .chart-row {
    height: 30vh;
  }

  .training-stats-box {
    height: 28vh;
  }

  .itemall {
    width: 100%;
    height: 90%;
    display: flex;
    gap: 2%;
    padding: 0;
    box-sizing: border-box;

    .item {
      background: #ffffff;
      border-radius: 0.5rem;
      flex: 1;
      height: 100%;
      min-height: 70px;
      border: 1px solid #e2e7f5;
      display: flex;
      align-items: center;
      padding: 3%;
      box-sizing: border-box;

      .img {
        width: 20%;
        max-width: 60px;
        height: auto;
        object-fit: contain;
      }

      .content {
        margin-left: 5%;
        width: 75%;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;

        .number {
          font-size: 1.5rem;
          font-weight: bold;
          color: #323232;
          line-height: 1.2;
        }

        .title {
          font-size: 0.875rem;
          color: #536387;
        }
      }
    }
  }


  .itemall2 {
    gap: 1.5%;
  }
}

@media screen and (max-width: 1200px) {
  .statistics-box {
    height: 22vh;
  }

  .chart-row {
    height: 29vh;
  }

  .training-stats-box {
    height: 27vh;
  }

  .itemall {
    gap: 1%;
    .item {
      .content {
        .number {
          font-size: 1.125rem;
        }

        .title {
          font-size: 0.75rem;
        }
      }
    }
  }

  .itemall2 {
    gap: 1%;
  }
}

.accuracy {
  position: relative;
  padding-left: 20px;
}

.accuracy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 38%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background-color: #2265ea;
  display: inline-block;
  border-radius: 2px;
}
</style>
